import { IMTableType } from "@/types/table";
import clubAvatar from "./components/clubAvatar";
import { businessStateMap } from "./store";
import { getSelfNodeIcon } from "@system/menu/store";
const columns = reactive<IMTableType[]>([
  { title: getProxyT("base.index"), dataIndex: "index", key: "index" },
  {
    title: computed(() => `${$t("table143")}ID`),
    dataIndex: "im_groupid",
    key: "im_groupid",
  },
  { title: getProxyT("table144"), dataIndex: "name", key: "name" },
  {
    title: getProxyT("table145"),
    dataIndex: "personNum",
    key: "personNum",
  },
  {
    title: getProxyT("table146"),
    dataIndex: "nickname",
    key: "nickname",
  },
  {
    title: getProxyT("table147"),
    dataIndex: "introduction",
    key: "introduction",
  },
  { title: getProxyT("table31"), dataIndex: "status", key: "status" },
  {
    title: getProxyT("table43"),
    dataIndex: "created_at",
    key: "created_at",
    customRender: ({ text }: any) => getTimeByZone(text),
  },
  {
    title: getProxyT("table44"),
    dataIndex: "updated_at",
    key: "updated_at",
    customRender: ({ text }: any) => getTimeByZone(text),
  },
  { title: getProxyT("base.action"), key: "action" },
]);

export const tableConfig = ({ handleAction, fetchList }: any) => {
  const defineTable = {
    components: {
      clubAvatar,
    },
    pagination: reactive({
      total: 0,
      current: 1,
      pageSize: 10,
      showTotal: (total: any) =>
        `${$t("base.total")}${total}${$t("base.items")}`,
      showQuickJumper: true,
      showLessItems: true,
    }),
    loading: ref(false),
    on: {
      change(paging: { current: number; pageSize: number }) {
        const { pagination } = defineTable;
        pagination.current = paging.current;
        pagination.pageSize = paging.pageSize;
        fetchList();
      },
    },
    columns: columns,
    dataSource: ref([]),
    tableSlot: {
      bodyCell({ value, text, index, column, record }: any) {
        switch (column.key) {
          case "index":
            const { pagination } = defineTable;
            return (
              <div>
                <i>
                  {index + 1 + (pagination.current - 1) * pagination.pageSize}
                </i>
              </div>
            );
          case "name":
            return (
              <div>
                <span title={record.name}>
                  {record.name.slice(0, 6)}
                  {record.name.length > 6 ? "..." : ""}
                </span>
              </div>
            );
          case "personNum":
            return (
              <>
                <div>
                  <div
                    style="color: #0052D9;cursor: pointer;"
                    onClick={() =>
                      handleAction({ record, type: "detail->member" })
                    }
                  >
                    {record.personNum}
                  </div>
                </div>
              </>
            );
          case "nickname":
            return (
              <div>
                <clubAvatar data={record} />
              </div>
            );
          case "introduction":
            return (
              <>
                <div>
                  <span title={record.introduction}>
                    {record.introduction.slice(0, 10)}
                    {record.introduction.length > 10 ? "..." : ""}
                  </span>
                </div>
              </>
            );
          case "status":
            return (
              <>
                <div>
                  <i class={record.status === 0 ? "s-52c41a" : "s-c1c1c1"}>
                    {selectDictLabel(businessStateMap, record.status)}
                  </i>
                </div>
              </>
            );
          case "action":
            return (
              <>
                <div>
                  {withDirectivePower({
                    vNode: (
                      <div class="s-table-body_cell">
                        <s-button
                          type="link"
                          onClick={() =>
                            handleAction({ record, type: "detail" })
                          }
                          icon={renderIcon(
                            getSelfNodeIcon("societyApi.queryClubDetail")
                          )}
                        >
                          {$t("base.detail")}
                        </s-button>
                        <a-divider type="vertical" />
                      </div>
                    ),
                    bindingValue: "societyApi.queryClubDetail",
                  })}

                  {withDirectivePower({
                    vNode: renderDisable.call({
                      record,
                      handleAction,
                      identify: "societyApi.updateClubStatus",
                    }),
                    bindingValue: "societyApi.updateClubStatus",
                  })}
                </div>
              </>
            );
        }
      },
    },
  };
  return defineTable;
};
